<template>
  <div class="">
    <Headers :graphic="graphic" />
    <div class="information">
      <div class="title">工作动态</div>
      <div class="title-bom"></div>
      <div class="more">
        换一批
        <i class="el-icon-refresh"></i>
      </div>
      <div class="card">
        <div class="card-item" v-for="item in 4" :key="item">
          <div class="tit">
            公告|研究生院赴天津大学商讨深化联合培养研究生工作
          </div>
          <div class="text">
            为深入推进我院与天津大学联合培养研究生工作，2018年11…
          </div>
          <div class="icons">
            <img src="@/assets/icons/right-more.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="title">创新工作成果展示</div>
      <div class="title-bom"></div>
      <div class="more">更多>></div>
      <div class="card">
        <div class="card-item" v-for="item in 8" :key="item">
          <div class="item-left">
            <img src="@/assets/imgs/poo.jpg" alt="" />
          </div>
          <div class="item-right">
            <div class="tit">秦伯益院士畅谈读书与人生</div>
            <div class="article">
              军事科学院研究生院举办第405期“红山博学讲坛”，邀请原军事医学科学院院长、中国工程院院士秦伯益研究员
            </div>
            <div class="data">2021.10.28</div>
          </div>
        </div>
      </div>
    </div>
    <div class="activity">
      <div class="title">军民融合成果展示</div>
      <div class="title-bom"></div>
      <div class="more">查看更多>></div>
      <div class="work-graphic">
        <div class="graphic-item" v-for="item in 3" :key="item">
          <div class="item-img">
            <img src="@/assets/imgs/item-img.jpg" alt="" />
          </div>
          <div class="item-text">
            <div class="">研究生教育创新工作成果展示标题</div>
            <div class="">
              <span>标签文字</span>
              <span>标签文字</span>
            </div>
            <div class="color-b21315">
              <i class="iconfont icon-shijian color-b21315"></i>
              2020年10月19日
            </div>
          </div>
        </div>
      </div>
    </div>
    <Bottom />
    <Topnav />
  </div>
</template>

<script>
import Topnav from "@/components/topnav.vue";
import Bottom from "@/components/bottom.vue";
import Headers from "@/components/headers.vue";

export default {
  name: "",
  data() {
    return {
      graphic: {
        title: "创新工作",
        imgherf: "@/assets/imgs/background2.png",
        text:
          "新的军事科学院学科布局从原有的军事学扩展到理、工、农、医、管、军等多个门类，形成了理论与技术相互融合支撑的全新发展格局。"
      }
    };
  },
  components: {
    Topnav,
    Bottom,
    Headers
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.title {
  font-weight: 700;
  color: #333333;
  font-size: 48px;
  margin-bottom: 15px;
}
.title-bom {
  width: 111px;
  height: 8px;
  background-color: #b21315;
  border-radius: 8px;
  margin-bottom: 40px;
}
.information {
  height: 570px;
  padding: 95px 330px;
  .more {
    text-align: right;
    color: #b21315;
    font-size: 16px;
    // padding-right: 50px;
    margin-bottom: 15px;
    font-weight: 700;
    i {
      font-size: 18px;
    }
  }
  .card {
    display: flex;
    justify-content: space-between;
    .card-item {
      width: 300px;
      height: 267px;
      background-color: #b21315;
      padding: 34px 25px 0;
      .tit {
        font-weight: 700;
        color: #ffffff;
        font-size: 20px;
        line-height: 30px;
      }
      .text {
        font-weight: 700;
        color: #ffffff;
        font-size: 16px;
        margin-top: 40px;
        line-height: 30px;
      }
      .icons {
        width: 80px;
        height: 50px;
        margin-left: 180px;
        margin-top: 20px;
      }
    }
  }
}
.content {
  background-color: #f4f4f4;
  padding: 95px 170px 50px;
  .more {
    font-weight: 700;
    color: #b21315;
    font-size: 18px;
    text-align: right;
    margin-bottom: 10px;
  }
  .card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .card-item {
      display: flex;
      width: 49%;
      margin-bottom: 15px;
      height: 200px;
      border-radius: 5px;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
      .item-left {
        margin-right: 20px;
        text-align: center;
        width: 290px;
        height: 200px;
        background-color: rgba(#b21315, 0.3);
        border-radius: 5px;
      }
      .item-right {
        width: 446px;
        .tit {
          font-weight: 700;
          color: #333333;
          font-size: 20px;
          margin-bottom: 15px;
          margin-top: 40px;
        }
        .article {
          color: #666666;
          font-size: 16px;
          height: 70px;
        }
        .data {
          color: #666666;
          font-size: 16px;
        }
      }
    }
  }
}
.activity {
  padding: 95px 170px;
  .more {
    text-align: right;
    color: #b21315;
    font-size: 16px;
    padding-right: 50px;
    font-weight: 700;
  }
  .work-graphic {
    display: flex;
    justify-content: space-evenly;
    // padding: 0 170px;
    margin-top: 15px;
    position: relative;
    .graphic-item {
      width: 460px;
      height: 460px;
      .item-img {
        width: 100%;
        height: 310px;
      }
      .item-text > div:nth-child(1) {
        font-weight: 700;
        color: #333333;
        font-size: 22px;
      }
      .item-text > div:nth-child(2) {
        margin: 10px 0 20px;
      }
      .item-text > div:nth-child(2) span {
        display: inline-block;
        line-height: 24px;
        width: 88px;
        height: 24px;
        background-color: rgba(178, 19, 21, 0.27);
        border: 1px solid #b21315;
        border-radius: 5px;
        color: #b21315;
        font-size: 14px;
        text-align: center;
        margin-right: 5px;
      }
      .item-text > div:nth-child(3) {
        color: #b21315;
        font-size: 18px;
      }
      .item-text > div:nth-child(3) i {
        color: #b21315;
        font-size: 18px;
      }
    }
  }
}
</style>
